<template>
  <form-container v-if="props.formSchema" :schema="props.formSchema" />
  <table-container v-else-if="props.tableSchema" :schema="props.tableSchema">
      <template v-for="slot in props.tableSchema.fields" #[slot.field]="scope" >
        <slot :name="slot.field" :row="scope.row"></slot>
      </template>
  </table-container>
</template>

<script setup lang="ts">
import { FormDataRowType } from "/types/form";
import { TableSchemaType } from "/types/table";
import {strMapToObj} from '@/utils/_'
import { reactive,ref } from "vue";
import { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>()

type PropDataType = {
  formSchema?: any,
  tableSchema?: TableSchemaType
}

const subFormData = reactive({} as any)
const props = defineProps<PropDataType>();

const emits = defineEmits(["onSubmit","formItemChange"]);
const rules = reactive({} as any)



/**
 * 格式化表单检验
 * 
 * @param data 表单校验
 */
// const formatRule = ()=>{
//   props?.formSchema?.forEach((item:any)=>{
//     rules[item.field] = item.rule
//     subFormData[item.field] = item.value
//   })
// }
// formatRule()



/**
 * 表单数据变化监听
 * @param event 表单字段结构
 */
const formItemChange = (event:FormDataRowType) => {
  
  
  
  emits("formItemChange",event)
}

/**
 * 格式化表单数据
 * 
 * @param data 表单数据
 */
const formatFormValue = (data: FormDataRowType[]) => {
  const formFields = new Map(data.filter((e) => !!e.field).map((e,index) => {return [`${e.field || ''}`,`${e.value || ''}`]}))
  return strMapToObj(formFields)
};


/**
 * 表单提交
 * @param data 
 */
const submitForm = async (formEl: FormInstance | undefined) => {  
  
  

  if (!formEl) return
  await formEl.validate((valid, fields) => {
 
    
    if (valid) {
      subFormData && emits("onSubmit", subFormData);
      
    } else {
      
    }
  })

  // data && emits("onSubmit", formatFormValue(data));
};


const resetForm = (data: any) => {
  
};
</script>

<style></style>
